<template>

  <div class="exppageWrap" id="question">
    <Row class="pageHeader">
      <div class="class-title-wrap">
        <div class="class-title">
          <div class="class-title-all" :class="{'active':currentTabComponent == 'experiment'}" @click="changeTab('experiment')">{{$route.meta.title}}</div>
        </div>
        <div style="margin-left: 30px" class="class-title">
          <div class="class-title-all" :class="{'active':currentTabComponent == 'creatExp'}" @click="changeTab('creatExp')">{{$t('Create')}}</div>
        </div>
      </div>
    </Row>
    <component v-bind:is="currentTabComponent" style='padding-top:20px !important;padding: 20px'></component>
  </div>


</template>
<script>
// D:\workspace\linew\training\src\view\experimentalScene\designPanel\experimentWrap.vue
import experiment from "@/view/experimentalScene/designPanel/experiment.vue";
import creatExp from '@/view/experimentalScene/designPanel/creatExp'
export default {
  components: {
    experiment,creatExp
  },
  watch: {
    $route(to, from) {
      this.currentTabComponent = this.$route.query.page||'experiment'
    },
  },
  data () {
    return {
      isCollapsed: false,
      currentTabComponent:this.$route.query.page||'experiment',
    }
  },
  methods: {
    changeTab (tab) {
      this.$router.push({
        name: this.$route.name,
        query: {
          page: tab
        }
      });
    }
  }
};
</script>
<style scoped>
.exppageWrap{
  position: relative;
  height: 100%;
}
.pageHeader{
  position:absolute;
  /* top:31px;
  left: 34px; */
  padding:20px 20px 0 20px;
  z-index: 10;
  width: 224px;
}
.pageHeader .title{
  float:left;
  font-size:18px;
}
.class-title-wrap{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.class-title{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.class-title-all{
  font-size: 16px;
  cursor: pointer;
  color: var(--default-color-level2);
}
.active{
  color: var(--default-color);
  font-size: 22px;
  font-weight: 600;
}
.class-title-line{
  background-color: transparent;
  height: 3px;
  border-radius: 1px;
  width: 50px;
  margin: 20px 0 3px 0;
}
.line-active{
  background-color: var(--default-color);;
}
</style>
